/*=========================================================================================
    File Name: maps.js
    Description: google maps
    ----------------------------------------------------------------------------------------
    Item Name: Apex - Responsive Admin Theme
    Version: 1.0
    Author: PIXINVENT
    Author URL: Author URL: http://bootstrapmb.com/muban/houtai
==========================================================================================*/

// Gmaps Maps
// ------------------------------

$(window).on("load", function () {

  // Basic Map
  // ------------------------------
  new GMaps({
    div: '#basic-map',
    lat: -12.043333,
    lng: -77.028333,
    height: 400,
  });


  // Map Events
  // ------------------------------

  map = new GMaps({
    div: '#map-events',
    zoom: 16,
    lat: -12.043333,
    lng: -77.028333,
    styles: [{
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#e0efef"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "hue": "#1900ff"
      }, {
        "color": "#c0e8e8"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [{
        "lightness": 100
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit.line",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 700
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#7dcdcd"
      }]
    }],
    click: function (e) {
      alert('click');
    },
    dragend: function (e) {
      alert('dragend');
    },

    // If you want to show an Info Window, you must add:
    /*infoWindow: {
      content: '<p>HTML Content</p>'
    }*/
  });


  // Map Markers
  // ------------------------------

  map = new GMaps({
    div: '#markers',
    lat: -12.043333,
    lng: -77.028333,
    styles: [{
      "featureType": "administrative.locality",
      "elementType": "all",
      "stylers": [{
        "hue": "#2c2e33"
      }, {
        "saturation": 7
      }, {
        "lightness": 19
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "hue": "#ffffff"
      }, {
        "saturation": -100
      }, {
        "lightness": 100
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "hue": "#ffffff"
      }, {
        "saturation": -100
      }, {
        "lightness": 100
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [{
        "hue": "#bbc0c4"
      }, {
        "saturation": -93
      }, {
        "lightness": 31
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "hue": "#bbc0c4"
      }, {
        "saturation": -93
      }, {
        "lightness": 31
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels",
      "stylers": [{
        "hue": "#bbc0c4"
      }, {
        "saturation": -93
      }, {
        "lightness": -2
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [{
        "hue": "#e9ebed"
      }, {
        "saturation": -90
      }, {
        "lightness": -8
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "hue": "#e9ebed"
      }, {
        "saturation": 10
      }, {
        "lightness": 69
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "hue": "#e9ebed"
      }, {
        "saturation": -78
      }, {
        "lightness": 67
      }, {
        "visibility": "simplified"
      }]
    }]
  });
  map.addMarker({
    lat: -12.043333,
    lng: -77.03,
    title: 'Lima',
    details: {
      database_id: 42,
      author: 'HPNeo'
    },
    click: function (e) {
      if (console.log)
        console.log(e);
      alert('You clicked in this marker');
    }
  });
  map.addMarker({
    lat: -12.042,
    lng: -77.028333,
    title: 'Marker with InfoWindow',
    infoWindow: {
      content: '<p>HTML Content</p>'
    }
  });
});
